@import (reference) '../../style/mixin.less';
@import url('../../assets/iconfonts/iconfont.css');

.header-container {
    .flex;

    position: relative;
    // position: fixed;
    // top: 0;
    // left: 0;
    // z-index: 10;
    width: 100%;
    height: (88 / @rootValue);
    background-color: @base-color;

    .header-slide-icon {
        font-size: (36 / @rootValue);
        color: #fff;
        .positionLeft;
    }

    .header-title {
        font-size: (40 / @rootValue);
        color: #fff;
    }

    .header-link {
        font-size: (40 / @rootValue);
        color: #fff;
        .positionRight;
    }

    .header-link-confim {
        font-size: (32 / @rootValue);
    }

    .nav-enter {
        transform: translate3d(-100%, 0, 0);
    }

    .nav-enter.nav-enter-active {
        transform: translate3d(0, 0, 0);
        transition: transform 300ms;
    }

    .nav-leave {
        transform: translate3d(0, 0, 0);
    }

    .nav-leave.nav-leave-active {
        transform: translate3d(-100%, 0, 0);
        transition: transform 300ms;
    }
}

.nav-slide-list {
    // .coverScreen(fixed);
    position: absolute;
    top: (88 / @rootValue);
    bottom: 0;
    left: 0;
    z-index: 1;
    display: flex;
    width: 60%;
    flex-direction: column;
    background-color: #fff;

    .nav-link {
        position: relative;
        padding: (35 / @rootValue) (20 / @rootValue);
        margin: 0 @common-wd;
        font-size: (32 / @rootValue);
        border-bottom: 1px solid #ddd;

        &::before {
            position: absolute;
            top: 50%;
            right: (10 / @rootValue);
            color: #666;
            transform: translate3d(0, -50%, 0);
        }
    }
}

.button-container .btn {
    opacity: 0;
    transform: translateX(-100%);
}

.fade-enter .btn {
    opacity: 0;
    transform: translateX(-100%);
}

.fade-enter-active .btn {
    opacity: 1;
    transform: translateX(0%);
}

.fade-enter-done .btn {
    opacity: 1;
    transform: translateX(0);
}

.fade-exit .btn {
    opacity: 1;
    transform: translateX(0%);
}

.fade-exit-active .btn {
    opacity: 0;
    transform: translateX(-100%);
}

.fade-exit-done .btn {
    opacity: 0;
    transform: translateX(-100%);
}

.fade-enter-active .btn,
.fade-exit-active .btn {
    transition:
        opacity 500ms,
        transform 500ms;
}
